<template>
  <div class="system-container">
    <el-container>
      <el-aside :style="{ height: asideHeight }" width="220px">
        <div class="el-tree-wrapper">
          <div class="el-tree-title" @click="queryData">血液成分</div>
          <el-tree
            :data="category"
            :default-checked-keys="['悬浮红细胞']"
            :default-expanded-keys="['红细胞', '悬浮红细胞']"
            node-key="name"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </div>
      </el-aside>
      <el-main class="intelirri" style="height: auto; padding: 0 0 0 20px">
        <el-card>
          <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
            <el-tab-pane label="自采/外购" name="first">
              <list
                :blood-group="BLOOD_GROUP"
                :blood-type-name="BLOOD_TYPE_NAME"
                :list-data="listData"
                :list-loading="listLoading"
                @detail="detail"
              />
            </el-tab-pane>
            <el-tab-pane label="自体" name="second">
              <list
                :blood-group="BLOOD_GROUP"
                :blood-type-name="BLOOD_TYPE_NAME"
                :list-data="listData"
                :list-loading="listLoading"
                @detail="detail"
              />
            </el-tab-pane>
            <el-tab-pane label="过期血" name="third">
              <list
                :blood-group="BLOOD_GROUP"
                :blood-type-name="BLOOD_TYPE_NAME"
                :list-data="listData"
                :list-loading="listLoading"
                @detail="detail"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>
    <detail ref="detail" />
  </div>
</template>

<script>
  import {
    PLAK0025 as getList,
    PLAK0009 as getBloodComponents,
  } from '@/api/client'
  import List from './components/list'
  import Detail from './components/detail'
  import { getCurrentTime, deepClone } from '@/utils'
  export default {
    name: 'BloodStockIndex',
    components: {
      List,
      Detail,
    },
    data() {
      return {
        activeName: 'first',
        asideHeight: 0,
        listData: [],
        listDataClone: [],
        listLoading: true,
        defaultProps: {
          children: 'childs',
          label: 'name',
        },
        bloodComponents: [],
        queryForm: {
          APPLY_NUM: '',
          BLOOD_GROUP: 'A^B^AB^O',
          BLOOD_TYPE: 'ALL',
        },
        BLOOD_TYPE: 'XFHXB',
        BLOOD_GROUP: '',
        BLOOD_TYPE_NAME_INDEXOF: '',
        BLOOD_TYPE_NAME: '悬浮红细胞',
        BLOOD_SOURCE: ['自采', '外购', '外买'],
        INVAL_DATE_STATUS: '',
        category: [],
        formData: {},
      }
    },
    created() {
      this.getBloodComponents()
    },
    mounted() {
      this.setAsideHeight()
    },
    methods: {
      detail(row) {
        this.$refs.detail.show(row)
      },
      setAsideHeight() {
        this.asideHeight = document.body.clientHeight - 245 + 'px'
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      queryData() {
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        this.listData = data
        this.listDataClone = deepClone(data)
        this.getFilterData()
        this.listLoading = false
      },
      async getBloodComponents() {
        let { data } = await getBloodComponents()
        if (data.item) {
          data = data.item
        }
        this.bloodComponents = data.map((val) => {
          return {
            type: val.BLOOD_TYPE,
            name: val.BLOOD_TYPE_NAME,
          }
        })
        this.mergeBloodComponents()
      },
      mergeBloodComponents() {
        let category = [
          { name: '红细胞', type: 'HXB', pid: 0 },
          { name: '血小板', type: 'XXB', pid: 0 },
          { name: '血浆', type: 'XJ', pid: 0 },
          { name: '冷沉淀', type: 'LCD', pid: 0 },
          { name: '全血', type: 'QX', pid: 0 },
        ]
        category.forEach((item) => {
          item.childs = this.bloodComponents.filter((val) => {
            return val.name.indexOf(item.name) > -1
          })
        })
        this.category = category
        for (const item of this.bloodComponents) {
          const childNodes = ['A', 'B', 'AB', 'O']
          item.childs = []
          for (const childItem of childNodes) {
            item.childs.push({
              pname: item.name,
              type: item.type,
              name: childItem,
              value: childItem,
            })
          }
        }
        this.fetchData()
      },
      handleRefresh() {
        this.fetchData()
      },
      tabClick(val) {
        switch (val.name) {
          case 'first':
            this.BLOOD_SOURCE = ['自采', '外购', '外买']
            this.INVAL_DATE_STATUS = ''
            break
          case 'second':
            this.BLOOD_SOURCE = ['自体']
            this.INVAL_DATE_STATUS = ''
            break
          case 'third':
            this.BLOOD_SOURCE = ''
            this.INVAL_DATE_STATUS = 1
            break
        }
        this.getFilterData()
      },
      handleNodeClick(data) {
        if (+data.pid === 0) {
          this.BLOOD_TYPE_NAME_INDEXOF = data.name
          this.BLOOD_TYPE = ''
          this.BLOOD_TYPE_NAME = ''
          this.BLOOD_GROUP = ''
        } else {
          if (data.childs) {
            this.BLOOD_TYPE_NAME_INDEXOF = ''
            this.BLOOD_TYPE = data.type
            this.BLOOD_TYPE_NAME = data.name
            this.BLOOD_GROUP = ''
          } else {
            this.BLOOD_TYPE_NAME_INDEXOF = ''
            this.BLOOD_TYPE = data.type
            this.BLOOD_TYPE_NAME = data.name
            this.BLOOD_GROUP = data.name
          }
        }

        this.getFilterData()
      },
      getFilterData() {
        this.listData = deepClone(this.listDataClone)
        if (this.BLOOD_TYPE_NAME_INDEXOF) {
          this.listData = this.listData.filter((val) => {
            return (
              val.BLOOD_TYPE_NAME.indexOf(this.BLOOD_TYPE_NAME_INDEXOF) > -1
            )
          })
        }
        if (this.BLOOD_TYPE) {
          this.listData = this.listData.filter((val) => {
            return val.BLOOD_TYPE === this.BLOOD_TYPE
          })
        }
        if (this.BLOOD_GROUP) {
          this.listData = this.listData.filter((val) => {
            return val.BLOOD_GROUP === this.BLOOD_GROUP
          })
        }
        if (this.BLOOD_SOURCE) {
          this.listData = this.listData.filter((val) => {
            return this.BLOOD_SOURCE.includes(val.BLOOD_SOURCE)
          })
        }
        if (this.INVAL_DATE_STATUS) {
          this.listData = this.listData.filter((val) => {
            return val.INVAL_DATE < getCurrentTime().substr(0, 10)
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pr8 {
    padding-right: 8px;
  }
  .el-tree-wrapper {
    .el-tree-title {
      padding-left: 10px;
      margin-bottom: 8px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
    }
  }
</style>
